<!--引入头部-->
{include file="common/header"}

<div class="layui-container">
    <form id="myform" class="layui-form" enctype="multipart/form-data" method="post">
        <div class="layui-upload">
            
            <br><br>
            <div class="layui-form-item  layui-col-md6">
                <label class="layui-form-label">套图名称</label>
                <div class="layui-input-block">
                    <input type="text" name="" id="name" placeholder="请输入图片名称"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-form-item layui-col-md6">
                <label class="layui-form-label">图片分类</label>
                <div class="layui-input-block">
                    <select name="" id="sort">
                        <option value=""></option>

                        {foreach $sort as $key=>$vo }
                        <option value="{$vo.id}">{$vo.sortname}</option>
                        {/foreach}

                    </select>
                </div>
            </div>

            <div class="layui-form-item  layui-col-md6">
                <label class="layui-form-label">图片标签</label>
                <div class="layui-input-block">
                    <input type="text" name="" id="tag" placeholder="请输入图片标签,用，号隔开"
                           class="layui-input">
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">图片</label>
                <div class="layui-input-block">
                    <input type="file" name="" id="choose-file" multiple="multiple"/>
                </div>
            </div>
            <hr>
            <div class="layui-form-item">
                <p>

                <ul class="file-list ">

                </ul>
                </p>
            </div>
            <!--<button type="button" class="layui-btn" id="testListAction">开始上传</button>-->
            <button class="layui-btn" type="button" style="cursor: pointer;margin-left: 150px;" href="javascript:;"
                    id="upload">上传
            </button>
        </div>
    </form>
</div>


<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="__LAYUI__/layui.js" charset="utf-8"></script>
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<!--选择框js勿删-->
<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        //自定义验证规则
        form.verify({
            title: function (value) {
                if (value.length < 5) {
                    return '标题至少得5个字符啊';
                }
            }
            , pass: [
                /^[\S]{6,12}$/
                , '密码必须6到12位，且不能出现空格'
            ]
            , content: function (value) {
                layedit.sync(editIndex);
            }
        });

        //监听指定开关
        form.on('switch(switchTest)', function (data) {
            layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
                offset: '6px'
            });
            layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
        });

        //监听提交
        form.on('submit(demo1)', function (data) {
            layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            })
            return false;
        });

        //表单赋值
        layui.$('#LAY-component-form-setval').on('click', function () {
            form.val('example', {
                "username": "贤心" // "name": "value"
                , "password": "123456"
                , "interest": 1
                , "like[write]": true //复选框选中状态
                , "close": true //开关状态
                , "sex": "女"
                , "desc": "我爱 layui"
            });
        });

        //表单取值
        layui.$('#LAY-component-form-getval').on('click', function () {
            var data = form.val('example');
            alert(JSON.stringify(data));
        });

    });
</script>


<!--上传js-->
<script>

    $(function () {
        ////////////////////////////////////////////////图片上传//////////////////////////////////////////////
        //声明变量
        var $button = $('#upload'),
            //选择文件按钮
            $file = $("#choose-file"),
            //回显的列表
            $list = $('.file-list'),
            //选择要上传的所有文件
            fileList = [];
        //当前选择上传的文件
        var curFile;
        // 选择按钮change事件，实例化fileReader,调它的readAsDataURL并把原生File对象传给它，
        // 监听它的onload事件，load完读取的结果就在它的result属性里了。它是一个base64格式的，可直接赋值给一个img的src.
        $file.on('change', function (e) {
            //上传过图片后再次上传时限值数量
            var numold = $('li').length;
            // if (numold >= 6) {
            //     layer.alert('最多上传6张图片');
            //     return;
            // }
            // //限制单次批量上传的数量
            // var num = e.target.files.length;
            // var numall = numold + num;
            // if (num > 6) {
            //     layer.alert('最多上传6张图片');
            //     return;
            // } else if (numall > 6) {
            //     layer.alert('最多上传6张图片');
            //     return;
            // }
            //原生的文件对象，相当于$file.get(0).files;//files[0]为第一张图片的信息;
            curFile = this.files;
            //curFile = $file.get(0).files;
            //console.log(curFile);
            //将FileList对象变成数组
            fileList = fileList.concat(Array.from(curFile));
            //console.log(fileList);
            for (var i = 0, len = curFile.length; i < len; i++) {
                reviewFile(curFile[i])
            }
            $('.file-list').fadeIn(2500);
        });


        function reviewFile(file) {
            //实例化fileReader,
            var fd = new FileReader();
            //获取当前选择文件的类型
            var fileType = file.type;
            //调它的readAsDataURL并把原生File对象传给它，
            fd.readAsDataURL(file);//base64
            //监听它的onload事件，load完读取的结果就在它的result属性里了
            fd.onload = function () {
                if (/^image\/[jpeg|png|jpg|gif]/.test(fileType)) {
                    $list.append('<li style="border:solid #f0f0f0 1px; margin:5px 5px;" class="file-item"><img src="' + this.result + '" alt="" height="100"><span class="file-del">删除</span></li>').children(':last').hide().fadeIn(2500);
                } else {
                    $list.append('<li class="file-item"><span class="file-name">' + file.name + '</span><span class="file-del">删除</span></li>')
                }

            }
        }

        //点击删除按钮事件：
        $(".file-list").on('click', '.file-del', function () {
            let $parent = $(this).parent();
            console.log($parent);
            let index = $parent.index();
            fileList.splice(index, 1);
            $parent.fadeOut(850, function () {
                $parent.remove()
            });
            //$parent.remove()
        });
        //点击上传按钮事件：
        $button.on('click', function () {
            var name = $('#name').val();
            var sort = $(" select[ id='sort' ] ").val();
            var tag = $(" input[ id='tag' ] ").val();

            // var catgory = $('#catgory').val();
            // var price = $('#price').val();
            // var desc = $('#desc').val();
            // var stock = $('#stock').val();
            // var status = $("input[type='radio']:checked").val();
            // var reg = /^[1-9]\d*$/;
            // if (!(reg.test(stock))) {
            //     layer.alert('商品库存为整数!');
            //     return;
            // }
            if (name == '') {
                layer.alert('请输入套图名称');
                return;
            }
            if (sort == '') {
                layer.alert('请选择套图分类');
                return;
            }
            if (tag == '') {
                layer.alert('请输入套图标签');
                return;
            }
            // else if (status == null) {
            //     layer.alert('请输入商品显示状态');
            //     return;
            // }
            // else if (catgory == '') {
            //     layer.alert('请输入商品分类');
            //     return;
            // }
            // else if (price == '') {
            //     layer.alert('请输入商品价格');
            //     return;
            // }
            // else if (stock == '') {
            //     layer.alert('请输入商品库存');
            //     return;
            // }
            // else if (fileList.length == 0) {
            //     layer.alert('请选择商品图片');
            //     return;
            // }
            if (fileList.length > 30) {
                layer.alert('最多允许上传6张图片');
                return;
            } else {
                var formData = new FormData();
                for (var i = 0, len = fileList.length; i < len; i++) {
                    //console.log(fileList[i]);
                    formData.append('upfile[]', fileList[i]);
                }
                formData.append('name', name);
                formData.append('sort', sort);
                formData.append('tag', tag);
                // formData.append('catgory', catgory);
                // formData.append('price', price);
                // formData.append('desc', desc);
                // formData.append('stock', stock);
                // formData.append('status', status);
                //console.log(formData);
                $.ajax({
                    url: 'upimgs',
                    type: 'post',
                    data: formData,
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        if (data.status == '1') {
                            layer.msg(data.content, {icon: 6});
                        } else if (data.status == '2') {
                            layer.msg(data.content, {icon: 1});
                        }
                    }
                })
            }
        })
    })


</script>


</body>
</html>